<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .banner{width: 300px;height:90px;margin: 0 auto;position: relative;}

    .banner .imgbox{position: absolute;left:0px;}
    .banner .imgbox img{width: 300px;height: 90px;float: left;}

    .banner .btns input{position: absolute;width: 30px;height:30px;top: 30px;}
    .banner .btns .left{left:0;}
    .banner .btns .right{right:0;}

  </style>
</head>
<body>
  <div class="banner">
    <div class="imgbox">
      <img src="../imgs/banner1.jpg" alt="">
      <img src="../imgs/banner2.jpg" alt="">
      <img src="../imgs/banner3.jpg" alt="">
      <img src="../imgs/banner4.jpg" alt="">
      <img src="../imgs/banner5.jpg" alt="">
    </div>
    <div class="btns">
      <input type="button" value="<" class="left">
      <input type="button" value=">" class="right">
    </div>
  </div>
</body>
<script>
  var imgbox = document.querySelector(".imgbox");
  var left = document.querySelector(".left");
  var right = document.querySelector(".right");
  var imgs = imgbox.children;
  
  // 根据当前图片数量自动计算imgbox的宽度
  imgbox.style.width = imgs.length * imgs[0].offsetWidth + "px";

  // 设置默认索引
  var index = 0;
  // 根据默认索引，设置imgbox的位置，实现切换图片效果
  imgbox.style.left = index * -imgs[0].offsetWidth + "px";

  // 右按钮功能
  right.onclick = function(){
    // 判断索引是否到达右按钮的极限：length-1
    if(index === imgs.length - 1){
      // 设置为初始值0
      index = 0;
    }else{
      // 如果没有到达最后一张，正常++
      index++;
    }
    // 改变索引后，重新计算imgbox的位置
    imgbox.style.left = index * -imgs[0].offsetWidth + "px";
  }
  
  // 作业：左按钮功能
  left.onclick = function(){
    if(index === 0){
      index = imgs.length-1;
    }else{
      index--;
    }
    imgbox.style.left = index * -imgs[0].offsetWidth + "px";
  }
  
</script>
</html>